<template>
    <div class="entrance-container">
        <div class="particleGround"></div>
        <div class="container-wrapper">
            <div class="sign">
                <router-link to="/entrance/sign_in">登录</router-link>
                <span>·</span>
                <router-link to="/entrance/sign_up">注册</router-link>
            </div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import { ParticleGround } from '@/assets/lib/particleground/particleground'
    export default {
        mounted(){
//            var operator = ParticleGround(document.querySelector('.particleGround'),{
//                dotColor: '#fff',   //设置粒子的颜色
//                lineColor: '#fff',  //设置线的颜色
//                dotOpacity: 0.2,    //设置粒子的透明度
//                lineOpacity: 0.2,   //设置线的透明度
//                minSpeedX: 0.4,     //设置x轴方向的最小移动速度
//                maxSpeedX: 1,       //设置x轴方向的最大移动速度
//                minSpeedY:0.4,      //设置y轴方向的最小移动速度
//                maxSpeedY:1,        //设置y轴方向的最大移动速度
//                parallax: false,    //指定粒子是否跟随鼠标
//                directionX: "center",   //指定粒子x轴的走向
//                directionY: "center",   //指定粒子y轴的走向
//                dotMinSize: 3,      //如果想让粒子大小相同,只需dotMinSize和dotMaxSize相同即可
//                dotMaxSize: 20,
//                lineWidth:1,         //设置线的宽度
//                curvedLines:false,  //设置线是否弯曲,前提是parallax为true
//                density:35000,       //设置粒子密度,值越大,密度越小
//                clickAddDot:false,   //设置是否添加点击画布添加粒子事件
//                addDotNumber:2,     //设置每次点击添加的粒子个数
//                dotShape:"heart",      //设置粒子的形状  可选址:circle edge(正方形) triangle(三角形) polygon(多边形) star
//                sideNumber:5,        //对polygon,star才有效
//                proximity:100        //在指定的范围内,粒子之间产生会产生连线
//            })
//            this.$store.commit('setParticleGround',operator)
        },
        beforeDestroy(){
//            this.$store.getters.getParticleGround.pause()
        }
    }
</script>

<style scoped lang="less">
    .entrance-container{
        width: 100vw;
        height: 100vh;
        position:relative;
        .particleGround {
            background-image: linear-gradient(135deg,#79f1a4, #0e6fc6);
            position: fixed;
            width: 100vw;
            height: 100vh;
            z-index: -1;
        }
        .container-wrapper{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 400px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,.2);
            padding: 20px;
            .sign{
                width:100%;
                font-weight:700;
                font-size:18px;
                text-align: center;
                margin-bottom:30px;
                a{
                    color:#969696;
                    display: inline-block;
                    width: 56px;
                    height: 40px;
                    line-height:40px;
                    text-decoration: none;
                }
                a:hover{
                    border-bottom:2px solid #ea6f5a;
                }
                a.router-link-active{
                    color:#ea6f5a;
                    border-bottom:2px solid #ea6f5a;
                }
                span{
                    margin: 0 4px;
                }
            }
        }
    }
    @media screen and (min-width: 415px){
        .entrance-container {
            .container-wrapper{
                padding: 50px;
                .sign{
                    span{
                        margin: 0 14px;
                    }
                }
            }
        }
    }
</style>
